<template>
	<!-- 聊天页面 -->
	<view class="user-chat__date" v-if="getTime(item.time)!=0">{{getTime(item.time)}}</view>
	<view class="user-chat__list u-f" :class="{'user-chat__other':!item.isme}">
		<image :src="item.userpic" mode="widthFix" lazy-load />
		<view class="user-chat__list__body">
			<text v-if="item.type=='text'">{{item.data}}</text>
			<image v-if="item.type=='image'" :src="item.data" mode="widthFix" />
		</view>
	</view>
</template>

<script setup>
	import {getTime} from '../../common/time.js'
	const props = defineProps({
		item: {
			type: Object,
			required: true,
		}
	})
</script>

<style lang="scss" scoped>
.user-chat {
	&__date {
		text-align: center;
		color: #bbb;
		margin: 16upx 0;
		font-size: 18upx;
	}

	&__list {
		width: 100%;
		padding: 20upx 0;

		>image {
			width: 80upx;
			height: 80upx;
			border-radius: 10upx;
			margin-right: 30upx;
			border-radius: 50%;
		}

		&__body {
			display: inline-block;
			position: relative;
			max-width: 50%;
			padding: 20upx 30upx;
			border-radius: 10upx;

			>text {}

			background-color: rgba(0, 0, 0, .04);

			&::before {
				position: absolute;
				content: "";
				left: -32upx;
				top: 10upx;
				width: 0upx;
				border: 16upx solid transparent;
				border-right-color: rgba(0, 0, 0, .04);

			}

			>image {
				width: 300upx;
				background-color: red;
			}
		}

	}

	&__other {
		flex-direction: row-reverse;
		justify-content: flex-start;

		>image {
			margin-right: 0;
			margin-left: 30upx;
		}

		.user-chat__list__body {
			&::before {
				position: absolute;
				content: "";
				left: 100%;
				border-right-color: transparent;
				border-left-color: rgba(0, 0, 0, .04);

			}

		}

	}
	
}
</style>